<template>
  <div class="app-container over-scroll">
    <el-row :gutter="20" class="mb20">
      <el-col :span="4"><el-input v-model="req._memberName_" type="text" placeholder="请输入姓名" @change="getList"></el-input></el-col>
      <el-col :span="4"><SelectGroup v-model="req.groupCode_" @change="getList"></SelectGroup></el-col>
      <el-col :span="4">
        <el-date-picker style="width: 100%" v-model="req.month" value-format="yyyy-MM" type="month" @change="getList" placeholder="选择月份"></el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <el-button type="warning" icon="el-icon-download" @click="downloadTemp">下载考勤表</el-button>
      </el-col>
    </el-row>
    <el-table :data="list" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="memberName" label="姓名" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="groupName" label="部门" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="teamName" label="考勤组" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="month" label="统计月" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="timeSegment" label="考勤时段" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="workDay" label="应出勤天数" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="actualWorkDay" label="实际出勤天数" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="restDay" label="休息天数" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="workTimeHour" label="工作时长(小时)" min-width="120" align="center" show-overflow-tooltip>
        <template slot-scope="{row}">
            {{handleNum(row.workTimeHour, 2)}}
        </template>
      </el-table-column>
      <el-table-column prop="cdNum" label="迟到次数" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="cdTimeMinute" label="迟到时长(分钟)" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="kgNum" label="旷工次数" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="ztNum" label="早退次数" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="ztTimeMinute" label="早退时长" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="sbQkNum" label="上班缺卡次数" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="xbQkNum" label="下班缺卡次数" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="qjNum" label="请假次数" min-width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="jbTimeMinute" label="加班总时长" min-width="120" align="center" show-overflow-tooltip></el-table-column>
    </el-table>
    <!-- <Pagination v-show="total" :total="total" :page.sync="req.page" :limit.sync="req.pageSize" @pagination="getList"></Pagination> -->
  </div>
</template>

<script>
import { getCheckCountMonth } from '@/api/checkData';
import {handleNum} from '@/utils'
export default {
  components: {},
  data() {
    return {
      list: [],
      total: 0,
      req: {
        _memberName_: null,
        groupId: null,
        month: null,
        page: 1,
        pageSize: 20,
      },
      show: true
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleNum,
    // 获取列表
    getList() {
      getCheckCountMonth(this.req).then((res) => {
        this.list = res.data || [];
      });
    },
    downloadTemp() {
      this.download('/workbench/attend-record/tenantMemberCountByMonthExport', this.req, 'get');
    }
  }
};
</script>

<style lang="scss" scoped></style>
